
import { Card, Flex, Button } from '@/components/base';
import * as pages from '@/pages';
import { Controller } from '@/controller';
import styles from './index.module.less';
import { useElementResize, useItemWidth } from '@/tools/hooks';
import { useNavigate } from 'react-router-dom';

/** 首页 */
const Home = () => {

  const { onRef, width } = useElementResize();
  const { itemWidth } = useItemWidth(width, 300);
  const navigate = useNavigate();

  return (
    <div ref={onRef} className={styles['home']} >
      <Flex wrap gap="small">
        {Object.values(pages).map(page => {
          return (
            <Card title={page.description} style={{ width: itemWidth }}>
              <p>路径：/m/{page.name}?c={Controller.instance.company}</p>
              <p>标签：{page.tags}</p>
              <Button onClick={()=>{navigate(`/m/${page.name}`)}} >进入</Button>
            </Card>
          )
        })}
      </Flex>
    </div>
  )
}
export default Home;